<template>
  <div>
    <!-- 导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" />
      </van-sticky>
    </div>
    <!-- 标签页 -->
    <div class="Tab">
      <van-tabs @click="getOrder">
        <!-- 全部订单 -->
        <!-- 由于"全部"的name无法正确赋值至getOrder方法中的status，故为其单独调用了了一次接口获取数据 -->
        <van-tab title="全部" name=" ">
          <van-card
            v-for="item in orderData_Tag"
            :key="item.id"
            :desc="moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss')"
            :price="item.total + '.00'"
            :title="item.orderLines[0].name"
            :thumb="item.orderLines[0].photo"
            :tag="item.status"
            @click="toOrderData(item.id)"
          />
        </van-tab>
        <!-- 待付款订单 -->
        <van-tab title="待支付" name="待支付">
          <van-card
            v-for="item in productOrderData"
            :key="item.id"
            :desc="moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss')"
            :price="item.total + '.00'"
            :title="item.orderLines[0].name"
            :thumb="item.orderLines[0].photo"
            :tag="item.status"
            @click="toOrderData(item.id)"
          />
        </van-tab>
        <!-- 待发货订单 -->
        <van-tab title="待发货" name="待发货">
          <van-card
            v-for="item in productOrderData"
            :key="item.id"
            :desc="moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss')"
            :price="item.total + '.00'"
            :title="item.orderLines[0].name"
            :thumb="item.orderLines[0].photo"
            :tag="item.status"
            @click="toOrderData(item.id)"
          />
        </van-tab>
        <!-- 派送中订单 -->
        <van-tab title="派送中" name="派送中">
          <van-card
            v-for="item in productOrderData"
            :key="item.id"
            :desc="moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss')"
            :price="item.total + '.00'"
            :title="item.orderLines[0].name"
            :thumb="item.orderLines[0].photo"
            :tag="item.status"
            @click="toOrderData(item.id)"
          />
        </van-tab>
        <!-- 待评价 -->
        <van-tab title="待评价" name="待评价">
          <van-card
            v-for="item in productOrderData"
            :key="item.id"
            :desc="moment(item.orderTime).format('YYYY-MM-DD HH:mm:ss')"
            :price="item.total + '.00'"
            :title="item.orderLines[0].name"
            :thumb="item.orderLines[0].photo"
            :tag="item.status"
            @click="toOrderData(item.id)"
          />
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部空框 -->
    <div class="null"></div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
var moment = require("moment");
export default {
  data() {
    return {
      page: 1,
      pageSize: 100,
    };
  },

  // 生命周期函数
  created() {
    this.getAllOrder();
    this.getOrder_Tags()
  },

  methods: {
    moment,
    ...mapActions("productOrder", ["getProductOrderVuex","getOrder_Tag"]),

    // 根据状态获取订单信息
    getOrder(name) {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
        status: name,
      };
      this.getProductOrderVuex(param);
    },

    // 获取所有订单信息
    getAllOrder() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.getProductOrderVuex(param);
    },

    // 跳转详情页并传参
    toOrderData(id) {
      this.$router.push({
        path: "/manager/orderDetail",
        query: { id },
      });
    },

    // 导航栏"全部"专用
    getOrder_Tags(){
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.getOrder_Tag(param)
    }
  },

  computed: {
    ...mapState("productOrder", ["productOrderData","orderData_Tag"]),
  },
};
</script>

<style scoped>
.null {
  height: 60px;
}
</style>